<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-个人中心</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="./css/personal.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_48rfn6lutg4.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!-- 页面头 -->
        <ul class="layui-nav">
            <li class="layui-nav-item"><a class="headerTitle" href="javascript:;">南 声</a></li>
            <li class="layui-nav-item" v-if="loginer != null && loginer.session">
                <a href="javascript:;"> <span class="userface">{{loginer.nickname.substr(0,1)}}</span> <i
                        class="layui-icon layui-icon-down layui-nav-more"></i> </a>
                <dl class="layui-nav-child layui-nav-child-c layui-anim layui-anim-upbit">
                    <dd>设置</dd>
                    <dd>写文章</dd>
                    <dd>退出登录</dd>
                </dl>
            </li>
        </ul>
        <!-- 个人信息部分 -->
        <div class="personlaInfo">
            <div><span class="userface">{{loginer.nickname.substr(0,1)}}</span></div>
            <div class="infos">
                <span><i class="layui-icon layui-icon-user"> 昵称 : {{loginer.nickname}}</i></span>
                <span><i class="layui-icon layui-icon-time"> 加入时间 : {{loginer.joinTime}}</i></span>
                <span><i class="layui-icon layui-icon-male" v-if="!loginer.gender"> 男生</i></span>
                <span><i class="layui-icon layui-icon-male" v-if="loginer.gender"> 女生</i></span>
                <span><i class="layui-icon layui-icon-location"> {{loginer.location}}</i></span>
                <span><i class="layui-icon layui-icon-email"> {{loginer.email}}</i></span>
            </div>
            <div class="layui-text">
                <i class="layui-icon layui-icon-fire"> 座右铭</i> : {{loginer.sign}}
            </div>
        </div>
        <!-- 文章列表 -->
        <div class="listArticle">
            <div class="layui-card">
                <div class="layui-card-header">文章列表</div>
                <div class="layui-card-body">
                    <div class="articleItem">
                        <a href="javascript:;">Java学习教程</a>
                        <div>
                            <i class="layui-icon layui-icon-praise"> 36</i>
                            <i class="iconfont icon-eye"> 999</i>
                        </div>
                    </div>
                    <div class="articleItem">
                        <a href="javascript:;">Java学习教程</a>
                        <div>
                            <i class="layui-icon layui-icon-praise"> 36</i>
                            <i class="iconfont icon-eye"> 999</i>
                        </div>
                    </div>
                    <div class="articleItem">
                        <a href="javascript:;">Java学习教程</a>
                        <div>
                            <i class="layui-icon layui-icon-praise"> 36</i>
                            <i class="iconfont icon-eye"> 999</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                loginer: {
                    id : -1,
                    nickname: ''
                }
            },
            methods: {
                initCustomerInfo() { // 查询用户信息
                    let params = window.location.search;
                    if (params == null || params.trim() == '') {
                        this.loginer = JSON.parse(window.sessionStorage.getItem('loginer'));
                        if (this.loginer == null) {
                            alert('请先登录');
                            window.location.href = './login.html';
                        } else {
                            this.loginer.session = true;
                        }
                    } else {
                        let arr = params.split('=');
                        getRequest('http://localhost:8080/user/personal?authorId=' + arr[1]).then(resp => {
                            if (resp.data) {
                                this.loginer = resp.data;
                            }
                        })
                    }
                }
            },
            mounted() {
                this.initCustomerInfo();
            }
        })
    </script>
</body>

</html>